<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <h3>欢迎使用 Vue3 + Vite 项目模板</h3>
        </div>
      </template>
      <div class="card-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="feature-item">
              <el-icon><el-icon-collection /></el-icon>
              <h4>组件自动导入</h4>
              <p>Element Plus 组件和图标自动导入，无需手动 import</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="feature-item">
              <el-icon><el-icon-operation /></el-icon>
              <h4>Vue API 自动导入</h4>
              <p>Vue、Vue Router、Pinia 相关 API 已配置自动导入</p>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mt-3">
          <el-col :span="12">
            <div class="feature-item">
              <el-icon><el-icon-picture /></el-icon>
              <h4>SVG 图标支持</h4>
              <p>使用 vite-plugin-svg-icons 实现 SVG 图标按需加载</p>
              <div class="svg-demo">
                <svg-icon name="home" />
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="feature-item">
              <el-icon><el-icon-menu /></el-icon>
              <h4>路由和状态管理</h4>
              <p>集成 Vue Router 和 Pinia，轻松管理应用状态</p>
              <div class="pinia-demo">
                <el-button type="primary" @click="count++">
                  计数器: {{ count }}
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
/**
 * 首页组件
 * @file Home.vue
 */
// 使用 ref 创建响应式数据
const count = ref(0)
</script>

<style lang="scss" scoped>
.home-container {
  padding: 10px;

  .welcome-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .card-content {
      .feature-item {
        padding: 10px;
        border-radius: 10px;
        height: 100%;
        transition: all 0.3s;
        
        .el-icon {
          font-size: 24px;
          color: #3366ff;
          margin-bottom: 10px;
        }


        p {
          color: #606266;
          font-size: 14px;
        }

        .svg-demo {
          margin-top: 10px;

          svg {
            width: 24px;
            height: 24px;
            color: #3366ff;
          }
        }

        .pinia-demo {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>